<template>
    <div class="contion">
        <div class="setting">
            <div class="setting_1">
                <el-icon :size="25" @click="back"><ArrowLeftBold /></el-icon>
                <span style="margin-left:170px;font-size:20px">设置</span>
            </div>
            <div class="setting_2"> 
                <span class="setting_2_1">账号与安全</span>
                <span class="setting_2_1">隐私设置</span>
                <span class="setting_2_2" @click="uploads">实名认证</span>
            </div>
            <div class="setting_2"> 
                <span class="setting_2_1">通知设置</span>
                <span class="setting_2_1">添加小组件</span>
                <span class="setting_2_1">通用设置</span>
                <span class="setting_2_2">收货地址</span>
            </div>
            <div class="setting_2"> 
                <span class="setting_2_1">青少年模式</span>
                <span class="setting_2_1">深色模式</span>
                <span class="setting_2_2">字体大小</span>
            </div>
            <div class="setting_2"> 
                <span class="setting_2_1">帮助与客服</span>
                <span class="setting_2_1">鼓励一下</span>
                <span class="setting_2_1">个人信息收集清单</span>
                <span class="setting_2_1">第三方信息共享清单</span>
                <span class="setting_2_2">关于小红书</span>
            </div>
            <div class="setting_3"> 
                <span @click="logout" class="setting_2_3">退出登录</span>
            </div>
        </div>
        
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const back = () => {
    router.back();
}

const uploads = () => {
    router.push('/uploads')
}

// 获取路由实例
const router = useRouter();
// 从本地存储中获取 token
const token = ref(localStorage.getItem('token') || '');

// 退出登录函数
const logout = async () => {
    try {
        // 发送退出登录请求
        const response = await axios.post('http://127.0.0.1:8000/logout/', { token: token.value });

        // 检查响应状态码
        if (response.status === 200) {
            if (response.data.code === 200) {
                // 清除本地存储的 token
                // localStorage.removeItem('token');
                // 跳转到登录页面
                router.push('/login');
                // 显示成功提示信息
                ElMessage.success('退出成功');
            } else {
                // 显示失败提示信息
                ElMessage.error(`退出失败: ${response.data.msg}`);
            }
        } else {
            // 显示请求失败提示信息
            ElMessage.error('请求失败，请稍后再试');
        }
    } catch (error) {
        // 打印错误信息
        console.error('退出登录请求出错:', error);
        // 显示错误提示信息
        ElMessage.error('请求出错，请稍后再试');
    }
};
</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.setting{
    width: 100%;
    background-color: #F5F5F5;
}

.setting_1{
    margin-top: 20px;
    margin-left: 20px;
}

.setting_2{
    width: 90%;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    margin-left: 5%;
    margin-top: 30px;
}

.setting_2_1{
    width: 90%;
    height: 30px;
    padding-top: 10px;
    margin-left: 5%;
    border-bottom: darkgray 1px solid;
}

.setting_2_2{
    width: 90%;
    margin-left: 5%;
    height: 30px;
    padding-top: 10px;
}

.setting_3{
    width: 90%;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    margin-left: 5%;
    margin-top: 30px;
    margin-bottom: 20px;
    text-align:center;
}

.setting_2_3{
    width: 90%;
    margin-left: 5%;
    height: 30px;
    padding-top: 10px;
}
</style>